import React from 'react'
import {Switch,Route,Redirect, NavLink} from 'react-router-dom'
import FirstPage from './list/FirstPage'
import Bookrack from './bookrack/Bookrack'
import Short from './short/Short'
import Welfare from './welfare/Welfare'
import Mine from './mine/Mine'

const footNavList = [
    {
        text:"首页",
        to:"/home/list",
        url:'../../assets/精选-未选@2x.png'
    },
    {
        text:"短篇",
        to:"/home/short",
        url:'../../assets/我的-成为作家@2x.png'
    },
    {
        text:"书架",
        to:"/home/bookrack",
        url:'../../assets/我的-我的书架@2x.png'
    },
    {
        text:"福利",
        to:"/home/welfare",
        url:'../../assets/精选-未选@2x.png'
    },
    {
        text:"我的",
        to:"/home/mine",
        url:'../../assets/我拍的-意见反馈@2x.png'
    },
]

const Home = () => {
  return (
    <div className="page home-page">
      <main>
        <Switch>
          <Route path="/home/list" component={FirstPage}/> {/*首页*/}
          <Route path="/home/bookrack" component={Bookrack}/> {/*书架*/}
          <Route path="/home/short" component={Short}/> {/*短篇*/}
          <Route path="/home/welfare" component={Welfare}/> {/*福利*/}
          <Route path="/home/mine" component={Mine}/> {/*我的*/}
          <Redirect from="/home" to="/home/list"/>
        </Switch>
      </main>
      <footer>
        {footNavList.map(item =>
            <NavLink key={item.text} to={item.to}>
                <img src={item.url}/>
                <span>{item.text}</span>
            </NavLink>
        )}
      </footer>
    </div>
  )
}

export default Home




/*
1. 二次封装axios，可以处理公共参数，统一处理返回值，请求时自动展示隐藏loading
2. api.js 统一管理请求的接口
3. webpack中 alias属性 配置别名 @ === src
4. webpack中配置proxy 请求代理处理跨域
*/